import React from 'react';
import { connect } from 'react-redux';
import { View, Text, Image } from '@tarojs/components';
import Taro, { useRouter } from '@tarojs/taro';
import pGo from '@/images/common/rightGray.png';
import './index.scss';
import ProductInfoAfterSale from '../productInfo/index';

const TypeSelect = () => {
  const router = useRouter();
  const { params = {} } = router;
  const { orderId, orderItemId } = params;

  const goToApplyPage = (kind) => {
    Taro.redirectTo({
      url: `/orderSubPack/afterSale/apply/index?kind=${kind}&orderId=${orderId}&orderItemId=${orderItemId}`,
    });
  };

  return (
    <View className="flex-column box2 typeSelect">
      <View className="txt32 black0 blod title">售后类型</View>
      <View className="flex-row-spaceBetween-center mt24">
        <Text className="txt28 black085">退货</Text>
        <View className="flex-row--center" onClick={() => goToApplyPage(2)}>
          <Text className="txt28 gray">退回收到的商品</Text>
          <Image className="arrow" src={pGo} />
        </View>
      </View>
      {/* <View className="flex-row-spaceBetween-center mt34">
        <Text className="txt28 black085">换货</Text>
        <View className="flex-row--center" onClick={() => goToApplyPage(3)}>
          <Text className="txt28 gray">更换收到的商品</Text>
          <Image className="arrow" src={pGo} />
        </View>
      </View> */}
    </View>
  );
};

//type:2退货 3换货
const ApplyType = ({ productInfoForAfterSale = {} }) => {
  return (
    <View className="ApplyTypeSelect flex-column--center">
      <View className="topTip hidden">
        该商品不支持无理由退货，如有质量问题请与卖家协商一致再发起申请。
      </View>
      <ProductInfoAfterSale
        className="boxShape space"
        product={productInfoForAfterSale}
        title="退换商品"
        handleNum={null}
      />
      <TypeSelect />
    </View>
  );
};

export default connect(({ order }) => ({
  productInfoForAfterSale: order.productInfoForAfterSale,
}))(ApplyType);
